<template>
	<view class="recharge_warp">
		<Header leftPathType="switchTab" leftPath="/pages/home/home" :title="$t('common.recharge')"/>
		<view class="recharge_content_warp">
			<view class="_content_common">
				<view class="_content_title_common">{{$t('recharge.customized.recharge')}}</view>
				<up-input
					:placeholder="$t('recharge.quota.placeholder')"
					border="surround"
					v-model="form.amount"
					:customStyle="inputCss"
					@change="checkAmount"
					type="number"
				  ></up-input>
			</view>
			<view class="">
				<view class="_content_title_common">{{$t('recharge.recommended.gear')}}</view>
				<view class="_content_grade">
					<view 
						v-for="(item,index) in gradeList" 
						:key="item.id" 
						:class="item.id === gradeSelect ? '_content_grade_item _content_grade_item_sel' : '_content_grade_item'" 
						:style="{'margin-right': index%2 ? '0rpx':'20rpx'}" 
						@click="selectGrade(item)"
					>
						<text>{{item.amount}}</text>
						<text style="font-size: 32rpx;margin-left: 4rpx;">USDT</text>
						<view class="_content_grade_sel_img" v-if="item.id === gradeSelect">
							<up-image src="/static/comm/select_2.png" width="26" height="26" bgColor="#f1f6ff00"></up-image>
						</view>
					</view>
				</view>
			</view>
			<view class="_content_common">
				<view class="reality_warp">
					<view class="reality_title_warp">{{$t("recharge.credited.account")}}</view>
					<view>
						<text class="reality_amount_warp">{{receivedAmount}}</text>
						<text class="reality_msg_warp">USDT</text>
					</view>
				</view>
				<view class="fee_warp">
					<text>{{$t("common.fee")}}：</text>
					<text class="fee_amount_warp">{{feeData}} USDT</text>
				</view>
			</view>
			<view class="_content_common">
				<view class="_content_title_common">{{$t("common.remarks")}}</view>
				<up-input
					:placeholder="$t('common.remarks.placeholder')"
					border="surround"
					v-model="form.remark"
					:customStyle="inputCss"
				  ></up-input>
			</view>
			<view class="_content_common">
				<view class="_content_title_common2">{{$t("common.warm.reminder")}}</view>
				<view class="_remark_warp">
					<view>{{$t('recharge.reminder')}}</view>
				</view>
			</view>
			
			<view class="but_comm_warp" @click="jumpPay">
				{{$t("common.pay")}}
			</view>
		</view>
		<!-- 温馨提示 -->
		<up-modal :show="openShow" :showConfirmButton = "false">
			<view class="slot-content">
				<view class="close_warp" @click="openShow=false;">
					<up-image src="/static/comm/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="content_">
					<view class="content_1">{{$t("common.warm.reminder")}}</view>
					<view class="content_3">
						<view class="content_3_item">
							<view class="content_3_item_yd"></view>
							<view class="content_3_item_value">{{$t('recharge.reminder1')}} {{form.amount}}，{{$t('recharge.reminder2')}} {{receivedAmount}};</view>
						</view>
						<view class="content_3_item">
							<view class="content_3_item_yd"></view>
							<view class="content_3_item_value">{{$t('recharge.reminder3')}}</view>
						</view>
						<view class="content_3_item">
							<view class="content_3_item_yd"></view>
							<view class="content_3_item_value content_3_item_value_kf">
								<view>{{$t('recharge.reminder.server')}}：{{serviceMobile}};</view>
								<view style="margin-left: 20rpx;" @click="copyData(serviceMobile)">
									<up-image src="/static/comm/copy.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
								</view>
							</view>
						</view>
					</view>
					<view class="pay_warp">
						<up-checkbox
							name="isCheck"
							usedAlone
							v-model:checked="isPay"
							shape="circle"
							activeColor="#265FFF"
							size="16"
							iconSize="16"
						>
							<template #label>
								<text class="pay_warp_msg">{{$t("common.confirm.pay")}}</text>
							</template>
						</up-checkbox>
					</view>
				</view>
				<view class="but_">
					<view class="but_copy" @click="updateOk">{{$t("common.confirm")}}</view>
				</view>
			</view>
		</up-modal>
		<!-- 转账地址 -->
		<up-popup
			:show="addressShow" 
			:round="10" 
			mode="bottom" 
			@close="checkCardShow(false)" 
			@open="checkCardShow(true)"
			:customStyle="{
				'padding':'30rpx 30rpx 60rpx',
			}"
		>
			<view class="select_address_warp">
				<view class="select_address_title">
					{{$t("recharge.transfer.address")}}
				</view>
				<view class="select_address_content"> 
					<view class="address_templ_title">
						<up-image src="/static/recharge/currency.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
						<view style="margin-left: 6rpx;">币种</view>
					</view>
					<view class="address_templ" style="margin-bottom: 40rpx;">
						<view 
							v-for="item in currencyTempl" :key="item.key" :class="form.currency ===item.key ? 'address_templ_item address_templ_item_sel':'address_templ_item'"
							@click="currencyTemplChange(true,item)"
						>
							<view>
								<view class="address_templ_key">{{item.key}}</view>
							</view>
							<up-checkbox
								name="isCheck"
								usedAlone
								v-model:checked="item.isSelect"
								shape="circle"
								activeColor="#265FFF"
								size="16"
								iconSize="16"
								@change="(event)=>currencyTemplChange(event,item)"
							></up-checkbox>
						</view>
					</view>
					<view class="address_templ_title">
						<up-image src="/static/recharge/network.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
						<view style="margin-left: 6rpx;">支付网络</view>
					</view>
					<view class="address_templ">
						<view 
							v-for="item in addressTempl" :key="item.id" :class="form.network ===item.value ? 'address_templ_item address_templ_item_sel':'address_templ_item'"
							@click="addressTemplChange(true,item)"
						>
							<view>
								<view class="address_templ_key">{{item.key}}</view>
							</view>
							<up-checkbox
								name="isCheck"
								usedAlone
								v-model:checked="item.isSelect"
								shape="circle"
								activeColor="#265FFF"
								size="16"
								iconSize="16"
								@change="(event)=>addressTemplChange(event,item)"
							></up-checkbox>
						</view>
					</view>
					<view class="but_comm_warp" @click="addressTemplOk">{{$t("common.confirm")}}</view>
				</view>
			</view>
		</up-popup>
		<!-- <up-popup
			:show="addressShow" 
			:round="10" 
			mode="bottom" 
			@close="checkCardShow(false)" 
			@open="checkCardShow(true)"
			:customStyle="{
				'height':'900rpx',
				'padding':'30rpx 30rpx 60rpx',
			}"
		>
			<view class="select_address_warp">
				<view class="select_address_title">
					{{$t("recharge.transfer.address")}}
				</view>
				<view class="select_address_content"> 
					<view class="address_templ">
						<view v-for="item in addressTempl" :key="item.id" :class="addressTemplSel ===item.id ? 'address_templ_item address_templ_item_sel':'address_templ_item'">
							<view>
								<view class="address_templ_key">{{item.key}}</view>
								<view class="address_templ_value">{{item.value}}</view>
							</view>
							<up-checkbox
								name="isCheck"
								usedAlone
								v-model:checked="item.isSelect"
								shape="circle"
								activeColor="#265FFF"
								size="16"
								iconSize="16"
								@change="(event)=>addressTemplChange(event,item)"
							></up-checkbox>
						</view>
					</view>
					<view class="but_comm_warp" @click="addressTemplOk">{{$t("common.confirm")}}</view>
				</view>
			</view>
		</up-popup> -->
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { copyData } from '@/utils/index.js';
	import { CUSTOMER_SERVICE_PHONE_NUMBER } from '@/utils/config.js';
	import { recharge,rechargeByBonus,rechargeFee,getRechargeChain } from '@/api/finance.js';
	
	export default {
		components:{Header},
		data() {
			return {
				form:{
					amount:null,//充值金额
					remark:null,
					// chainAddr:'',//支付方式
					currency:"USDT",
					network:"",// 网络
				},
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				gradeSelect:'',// 选择的档位
				gradeList:[
					{
						id:1,
						amount:100,
					},{
						id:2,
						amount:200,
					},{
						id:4,
						amount:500,
					},{
						id:5,
						amount:1000,
					},
				],
				openShow:false,
				serviceMobile:CUSTOMER_SERVICE_PHONE_NUMBER,
				addressShow:false,
				isPay:false,
				addressTempl:[],
				addressTemplSel:null,
				feeData:0,// 手续费
				receivedAmount :0,// 手续费
				currencyTempl:[
					{
						key:'USDT',
						name:"USDT",
						isSelect:true,
					}
				],
				currencyTemplSel:null,
			};
		},
		mounted() {
			
		},
		methods: {
			copyData,
			/**
			 * 切换档位
			 * @param {Object} item
			 */
			selectGrade(item){
				this.form.amount = item.amount;
				this.gradeSelect = item.id
				this.rechargeFeeFun();
			},
			jumpPay(){
				this.openShow = true;
			},
			/**
			 * 确认了温馨提示
			 */
			updateOk(){
				const isPay = this.isPay;
				if(!isPay){
					return;
				}
				this.openShow = false;
				// 查询地址
				this.getRechargeChainFun();
				this.checkCardShow(true);
			},
			/**
			 * 切换地址选项
			 * @param {Object} status
			 */
			checkCardShow(status){
				if(!status){
					this.addressTemplSel = {};
					this.currencyTemplSel = {};
					this.network = "";// 网络
				}
				this.addressShow = status;
			},
			/**
			 * 地址选中
			 */
			async addressTemplOk(){
				const addressTemplSel = this.addressTemplSel;
				if(!addressTemplSel){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t("recharge.transfer.address.null"),
					});
					return;
				}
				this.checkCardShow(false); 
				const params = this.form;
				const resp = await rechargeByBonus(params);
				if(resp && resp.bizcode === 100){
					const id = resp.data.id;
					if(!id || id === 0){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t("recharge.transfer.address.error"),
						});
						return;
					}
					uni.navigateTo({
						url:"/pages/pay_checkstand/pay_checkstand?id="+id,
					})
				}
			},
			/**
			 * 选中支付地址
			 * @param {Object} event
			 * @param {Object} item
			 */
			addressTemplChange(event,item){
				const addressTempl = this.addressTempl;
				let addressTemplSel = {};
				addressTempl.map(e=>{
					if(e.id === item.id && event){
						e.isSelect = true;
						addressTemplSel = e;
						this.form.network = e.value;
					}else{
						e.isSelect = false;
					}
				})
				this.addressTemplSel = addressTemplSel;
				this.addressTempl = addressTempl;
			},/**
			 * 选中支付地址
			 * @param {Object} event
			 * @param {Object} item
			 */
			currencyTemplChange(event,item){
				const currencyTempl = this.currencyTempl;
				let currencyTemplSel = {};
				currencyTempl.map(e=>{
					if(e.id === item.id && event){
						e.isSelect = true;
						currencyTemplSel = e;
						this.form.currency = e.key;
					}else{
						e.isSelect = false;
					}
				})
				this.currencyTemplSel = currencyTemplSel;
				this.currencyTempl = currencyTempl;
			},
			/**
			 * 自定义金额
			 * @param {Object} value
			 */
			checkAmount(value){
				this.form.amount = value;
				this.rechargeFeeFun();
			},
			/**
			 * 查询手续费
			 */
			async rechargeFeeFun(){
				const params = {
					amount:this.form.amount,
				}
				const resp = await rechargeFee(params);
				if(resp && resp.bizcode === 100){
					this.feeData = resp.data;
					this.receivedAmount = this.form.amount - resp.data;
				}
			},
			/**
			 * 查询充值地址
			 */
			async getRechargeChainFun(){
				const resp = await getRechargeChain();
				if(resp && resp.bizcode === 100){
					const optionData = [];
					const data = resp.data;
					if(data && data.length !==0){
						data.map((item,index)=>{
							optionData.push({
								id:index,
								key:item.key,
								value:item.value,
								isSelect:false,
							})
						})
					}
					this.addressTempl = optionData;
				}
			},
		}
	}
</script>

<style lang="scss">
.recharge_warp{
	height: calc(100vh - 102rpx);
	overflow: hidden;
	
	
	.content_3{
		background: #F5F5F5;
		border-radius: 6rpx;
		padding: 30rpx;
		.content_3_item{
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			text-align: left;
			.content_3_item_yd{
				width: 10rpx;
				height: 10rpx;
				background: #CCCCCC;
				border-radius: 50%;
			}
			.content_3_item_value{
				font-size: 24rpx;
				color: #333333;
				margin-left: 20rpx;
			}
			.content_3_item_value_kf{
				display: flex;
			}
		}
	}
	.pay_warp{
		margin-top: 40rpx;
		.pay_warp_msg{
			font-weight: 500;
			font-size: 30rpx;
			color: #666666;
		}
	}
	
	
	.but_comm_warp{
		margin-top: 100rpx;
		padding: 20rpx 0;
		// width: calc(100% - 40rpx);
	}
}
</style>
